import {Component, OnInit} from "@angular/core";
import * as echarts from 'echarts';

@Component({
  selector: 'device-sum-component',
  template: `
      <div class="row">
          <div class="col-md-4">
              <nb-card status="info">
                  <nb-card-header>设备统计</nb-card-header>
                  <nb-card-body>
                      <div>
                          <p class="list-item">设备总数</p>
                          <div class="list-icon">
                              {{1876+1870+1943+1904}}
                              <i class="fa fa-hdd"></i>
                          </div>
                      </div>
                      <hr/>
                      <div>
                          <p class="list-item">电表总数</p>
                          <div class="list-icon">
                              {{1876+1870}}
                              <i class="fa fa-bolt"></i>
                          </div>
                      </div>
                      <hr/>
                      <div>
                          <p class="list-item">水气热表总数</p>
                          <div class="list-icon">
                              {{1943+1904}}
                              <i class="fa fa-tint"></i>
                          </div>
                      </div>
                  </nb-card-body>
              </nb-card>
          </div>
          <div class="col-md-4">
              <nb-card status="warning">
                  <nb-card-header>上线情况</nb-card-header>
                  <nb-card-body>
                      <div id="onlineStatus" style="width:100%;height:200px"></div>
                  </nb-card-body>
              </nb-card>
          </div>
          <div class="col-md-4">
              <nb-card status="danger">
                  <nb-card-header>运行状态</nb-card-header>
                  <nb-card-body>
                      <div id="runStatus" style="width:100%;height:200px"></div>
                  </nb-card-body>
              </nb-card>
          </div>
      </div>
  `
})
export class DeviceSumComponent implements OnInit {

  ngOnInit() {
    this.initCharts();
  }

  initCharts() {
    const ec: any = echarts;
    const onlineStatus = ec.init(document.getElementById('onlineStatus'));
    const onlineStatusOption = {
      backgroundColor: 'white',
      tooltip: {
        trigger: 'none'
      },
      toolbox: {
        show: false,
      },
      legend: {
        padding: 0
      },
      series: [
        {
          name: '数据',
          type: 'pie',
          smooth: true,
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#c8c8c8'
              }
            }
          },
          data: [{
            name: '在线',
            value: 3767
          }, {
            name: '离线',
            value: 3826
          }],
        }
      ],
    };
    onlineStatus.setOption(onlineStatusOption);

    const runStatus = ec.init(document.getElementById('runStatus'));
    const runStatusOption = {
      backgroundColor: 'white',
      tooltip: {
        trigger: 'none'
      },
      toolbox: {
        show: false,
      },
      legend: {
        padding: 0
      },
      series: [
        {
          name: '数据',
          type: 'pie',
          smooth: true,
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#c8c8c8'
              }
            }
          },
          data: [{
            name: '运行',
            value: 2549
          }, {
            name: '停止',
            value: 2568
          }, {
            name: '异常',
            value: 2476
          }],
        }
      ],
    };
    runStatus.setOption(runStatusOption);
  }
}
